<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import {
  OButton,
  OIcon,
  OPopover,
  OIconClose,
  ODropdown,
  ODropdownItem,
  ODivider,
  useMessage,
  vOutClick,
} from '@opensig/opendesign';
import { ElSlider } from 'element-plus';
import IconTop from '~icons/app/icon-top.svg';
import IconLuntan from '~icons/app/icon-luntan.svg';
import IconPingfen from '~icons/app/icon-pingfen.svg';
import IconFeedback from '~icons/app/icon-feedback2.svg';
import IconQuestion from '~icons/app/icon-question.svg';
import IconMaodian from '~icons/app/icon-maodian.svg';
import IconForum from '~icons/app/icon-forum.svg';
import IconForum2 from '~icons/app/icon-forum2.svg';
import IconFaq from '~icons/app/icon-faq.svg';
import { openWindow, scrollToTop } from '@/utils/common.ts';
import DocFeedback from '@/components/doc/DocFeedback.vue';
import BottomPopover from '@/components/mobile/BottomPopover.vue';
import DocAnchorContent from '@/components/doc/DocAnchorContent.vue';
import { useLocale } from '@/composables/useLocale.ts';
import { docNpsApi } from '@/api/api-dsapi.ts';
import showMsg from '@/utils/showMsg.ts';
import { useScreen } from '@/composables/useScreen.ts';


const { t } = useLocale();
// 页面滚动大于一屏时，显示回到顶部悬浮按钮
const showBackTop = ref(false);
const domRef = ref<Element | null>(null);
const listenScroll = () => {
  showBackTop.value = (domRef.value?.scrollTop || 0) > 200;
};

onMounted(() => {
  domRef.value = document.querySelector('#app > .o-scroller > .o-scroller-container');
  domRef.value?.addEventListener('scroll', listenScroll);
  getMarks();
});

onUnmounted(() => {
  domRef.value?.removeEventListener('scroll', listenScroll);
});
// -------------------- 评分 --------------------
const scoreList = ref([
  { label: '文档获取率', value: 0, key: 'efficiency' },
  { label: '文档正确性', value: 0, key: 'accuracy' },
  { label: '内容完整性', value: 0, key: 'completeness' },
  { label: '文档易理解', value: 0, key: 'usability' },
]);
const popoverVisible = ref(false);
const marks = ref({});
const getMarks = () => {
  for (let i = 0; i <= 10; i++) {
    marks.value[i] = i.toString();
  }

};
const loading = ref(false);
const { isPhone } = useScreen();
const message = useMessage();
const submitScores = async () => {
  const data = scoreList.value.reduce((pre: Record<string, number>, cur) => {
    pre[cur.key] = cur.value;
    return pre;
  }, {});
  try {
    await docNpsApi({
      ...data,
      feedbackPageUrl: window.location.origin + window.location.pathname,
    });
    scoreVisible.value = false;
    const text = '提交成功';
    if (isPhone.value) {
      showMsg(text);
    } else {
      message.success({ content: text });
    }
    popoverVisible.value = false;
    scoreVisible.value = false;
  } finally {
    loading.value = false;
  }
};
// -------------------- 锚点弹窗 --------------------
const anchorVisible = ref(false);
const showAnchor = () => {
  anchorVisible.value = true;
};


const goForum = () => {
  openWindow(import.meta.env.VITE_FORUM_URL);
};
// -------------------- 评分弹窗 --------------------
const scoreVisible = ref(false);
const showScore = () => {
  scoreVisible.value = true;
};
watch(() => [popoverVisible.value, scoreVisible.value], () => {
  scoreList.value.forEach((el) => el.value = 0);
});

const { locale } = useLocale();
</script>
<template>
  <div class="floating-btn-layout">
    <DocFeedback position="left-start" from="floating" type="hover" :anchor="false">
      <div class="feedback-btn">
        <span>文档捉虫</span>
      </div>
    </DocFeedback>
    <div class="middle-wrapper">
      <OPopover position="lt" :visible="popoverVisible" :anchor="false" trigger="hover" wrap-class="score-popover">
        <template #target>
          <div class="slider-btn" @click="popoverVisible = true">
            <OIcon>
              <IconFeedback />
            </OIcon>
            <!--            <span>评分</span>-->
            <!--            <span class="current-score">8.8</span>-->
          </div>
        </template>
        <div class="slider-wrapper" v-out-click="() => popoverVisible = false">
          <OIcon class="icon-close" @click="popoverVisible = false">
            <OIconClose />
          </OIcon>
          <div class="slider-item" v-for="item in scoreList" :key="item.key">
            <div class="slider-item-title" :style="{ '--back-size': `${(10 / item.value) * 100}% 100%` }">{{ item.label
              }}
            </div>
            <ElSlider v-model="item.value" :max="10" :step="1" show-stops :marks="marks"
                      tooltip-class="slider-tooltip" />
          </div>
          <div class="slider-btn">
            <OButton :disabled="scoreList.every(v => v.value === 0)" color="primary" variant="text" class="text-btn"
                     @click="submitScores" :loading="loading">提交
            </OButton>
          </div>
        </div>
      </OPopover>

      <OPopover position="lt" wrap-class="forum-popover" :anchor="false" trigger="hover" :offset="12">
        <template #target>
          <div class="forum-btn" @click="popoverVisible = false">
            <OIcon>
              <IconForum />
            </OIcon>
          </div>
        </template>
        <div class="forum-popover-content">
          <div class="forum-item" @click="goForum">
            <OIcon class="forum-item-icon">
              <IconForum2 />
            </OIcon>
            <div class="forum-item-content">
              <div class="forum-item-title">社区论坛</div>
              <div class="forum-item-desc">发帖互助解决各类问题</div>
            </div>
          </div>
          <div class="forum-item" @click="openWindow(`/docs/${locale}/development/faq/general.html`, '_self')">
            <OIcon class="forum-item-icon">
              <IconFaq />
            </OIcon>
            <div class="forum-item-content">
              <div class="forum-item-title">常见FAQ</div>
              <div class="forum-item-desc">openUBMC常见问题汇总</div>
            </div>
          </div>
        </div>
      </OPopover>
    </div>

    <div v-show="showBackTop" class="scroll-btn" @click="scrollToTop(0)">
      <OIcon>
        <IconTop />
      </OIcon>
    </div>
  </div>

  <div class="floating-btn-layout is-mobile">
    <div class="anchor-btn" @click="showAnchor">
      <OIcon>
        <IconMaodian />
      </OIcon>
    </div>
    <ODropdown option-position="lb" trigger="click" option-wrap-class="mobile-dropdown">
      <div class="mobile-btn">
        <OIcon>
          <IconQuestion />
        </OIcon>
      </div>
      <template #dropdown>
        <ODropdownItem @click="showScore">
          <OIcon>
            <IconPingfen />
          </OIcon>
          <span>我要评分</span>
        </ODropdownItem>
        <ODropdownItem @click="goForum">
          <OIcon>
            <IconLuntan />
          </OIcon>
          <span>论坛求助</span>
        </ODropdownItem>
      </template>
    </ODropdown>
    <div v-show="showBackTop" class="scroll-btn" @click="scrollToTop(0)">
      <OIcon>
        <IconTop />
      </OIcon>
    </div>
  </div>

  <BottomPopover v-model:visible="anchorVisible" :full="false" :max-height="496" :title="t('docs.anchorTip')">
    <div class="mobile-anchor">
      <DocAnchorContent />
    </div>
  </BottomPopover>
  <BottomPopover v-model:visible="scoreVisible" title="我要评分">
    <div class="mobile-score">
      <div class="slider-item" v-for="item in scoreList" :key="item.key"
           :style="{ '--back-size': `${(10 / item.value) * 100}% 100%` }">
        <div class="slider-item-title">{{ item.label }}</div>
        <ElSlider v-model="item.value" :max="10" :step="1" show-stops :marks="marks"
                  tooltip-class="slider-tooltip" :show-tooltip="false" />
      </div>
      <div class="slider-btn2">
        <OButton color="primary" variant="text" class="text-btn" @click="scoreVisible = false">取消
        </OButton>
        <ODivider direction="v"></ODivider>
        <OButton color="primary" variant="text" class="text-btn" @click="submitScores">确定</OButton>
      </div>
    </div>
  </BottomPopover>
</template>

<style lang="scss" scoped>

.floating-btn-layout {
  position: fixed;
  top: calc(100vh - 256px - 96px);
  z-index: 9;
  display: flex;
  flex-direction: column;
  row-gap: var(--o-gap-3);
  right: calc(var(--grid--layout-padding) + var(--layout-doc-anchor-width));
  transform: translateX(100%);

  @include respond-to('<=laptop') {
    right: var(--grid--layout-padding);
    transform: translateX(0);
  }
  @include respond-to('>pc_l') {
    right: calc((100vw - var(--grid-layout-width)) / 2 + var(--layout-doc-anchor-width));
    transform: translateX(0);
  }
  @include respond-to('phone') {
    top: auto;
    bottom: 96px;
  }

  :deep(.o-icon) {
    path {
      fill: currentColor;
    }
  }

  &.is-mobile {
    display: none;
  }

  .middle-wrapper {
    padding: 10px 0;
  }

  .anchor-btn, .mobile-btn, .feedback-btn, .slider-btn, .forum-btn, .scroll-btn {
    width: var(--o-control_size-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--o-color-info1);

    .o-icon {
      font-size: var(--o-control_size-s);
      color: var(--o-color-info2);
    }

    @include hover {
      color: var(--o-color-ubmc);
      .o-icon {
        color: var(--o-color-ubmc);
      }
    }
  }

  .anchor-btn, .mobile-btn, .feedback-btn, .middle-wrapper, .scroll-btn {
    border-radius: var(--o-radius-xl);
    background-color: var(--o-color-fill2);
    box-shadow: var(--o-shadow-2);
  }

  .scroll-btn {
    display: flex;
  }

  .feedback-btn {
    height: 104px;
    padding: 14px 16px;
    text-align: center;
    position: relative;
    color: #fff;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svg-icons/icon-bug.svg');
      background-position: -40px -30px;
      background-size: 128px 184px;
      opacity: 1; /* 设置背景图片透明度 */
      z-index: 2;
    }

    span {
      position: relative;
      z-index: 3;
      @include tip1;
      color: inherit;
    }

    &:hover {
      color: #fff;

      &::after {
        opacity: 0.8;
      }
    }
  }

  .anchor-btn, .scroll-btn, .mobile-btn {
    height: 48px;
    flex-shrink: 0;
  }

  .anchor-btn {
    color: var(--o-color-info2);
  }

  .slider-btn, .forum-btn {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    font-size: 10px;
    line-height: 16px;

    .current-score {
      color: rgb(199, 0, 11);
    }
  }
}

@include respond-to('phone') {
  .floating-btn-layout {
    display: none;

    &.is-mobile {
      display: flex;
    }
  }

}
</style>
<style lang="scss">
.score-popover {
  color: var(--o-color-info2);
  --popup-min-width: 300px;
  position: relative;

  .o-popup-body {
    .slider-wrapper {
      padding: 18px 12px 8px;

      .icon-close {
        font-size: 16px;
        position: absolute;
        top: 12px;
        right: 12px;
        cursor: pointer;
        @include hover {
          color: var(--o-color-ubmc);
        }
      }

      .slider-btn {
        text-align: center;
      }
    }
  }
}

.slider-item {
  margin-bottom: var(--o-gap-3);

  .slider-item-title {
    text-align: center;
    color: var(--o-color-info2);
    @include tip2;
  }

  .el-slider {
    margin-top: var(--o-gap-2);
    height: 14px;

    .el-slider__runway {
      background-color: var(--o-color-control4);
      height: 6px;

      .el-slider__bar {
        background: linear-gradient(90deg, #b3d1ff 0%, #0071f3 100%) no-repeat;
        background-size: var(--back-size);
      }

      .el-slider__button-wrapper {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-slider__button {
          height: 14px;
          width: 14px;
          border: none;
          box-shadow: var(--o-shadow-1);
          background: rgb(var(--o-mixedgray-1));
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: var(--o-color-ubmc);
            transform: translate(-50%, -50%);
          }
        }
      }

      .el-slider__stop {
        height: 2px;
        width: 2px;
        top: 2px;
        background-color: rgba(var(--o-mixedgray-14), 0.6);

        &.el-slider__marks-stop {
          background-color: rgb(var(--o-mixedgray-1));
          z-index: 1;

          &:first-child {
            background-color: rgb(var(--o-mixedgray-1));
            transform: translateX(2px);
          }

          &:last-child {
            background-color: rgba(var(--o-mixedgray-14), 0.6);
            transform: translateX(-4px);
          }
        }

        &:not(.el-slider__marks-stop) {
          z-index: 2;
        }

      }


      .el-slider__marks {
        display: none;
      }
    }
  }

  .slider-tooltip {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    z-index: 3;
    background-color: transparent;
  }
}

.slider-item-popover {
  --popup-radius: 4px;

  .o-popup-body {
    width: 28px;
    height: 22px;
    line-height: 22px;
    padding: 0;
  }

  .slider-tooltip-value {
    text-align: center;
    font-weight: 500;
    @include tip1
  }
}

.el-popper.slider-tooltip {
  --el-text-color-primary: rgb(var(--o-mixedgray-1));
  color: var(--o-color-info1);
  box-shadow: var(--o-shadow-1);

  & > span:first-child {
    @include tip1;
    color: var(--o-color-info1);
    font-weight: 500;
  }
}

.mobile-dropdown {
  .o-dropdown-item {
    @include text1;

    .o-icon {
      font-size: 24px;
      margin-right: 8px;

      path {
        fill: currentColor;
      }
    }
  }
}

.forum-popover {
  .o-popup-body {
    padding: 24px;

    .forum-item {
      display: flex;
      column-gap: var(--o-gap-2);
      align-items: flex-start;
      cursor: pointer;

      & + .forum-item {
        margin-top: var(--o-gap-3);
      }

      .forum-item-icon {
        font-size: 24px;
      }

      .forum-item-content {

        .forum-item-title {
          @include tip1;
          color: var(--o-color-info1);
          font-weight: 500;
          line-height: 24px !important;

        }

        .forum-item-desc {
          @include tip2;
          color: var(--o-color-info2);
        }
      }

      &:hover {
        .forum-item-title {
          color: var(--o-color-ubmc);
        }
      }
    }
  }

  .o-icon {
    color: var(--o-color-info1);

    path {
      fill: currentColor;
    }
  }
}
</style>
<style scoped lang="scss">

:deep(.mobile-anchor) {
  .o-anchor {
    .o-anchor-line {
      display: none;
    }

    .o-anchor-item {
      width: calc(100vw - var(--grid--layout-padding) * 2 - 32px);
      margin-top: 0;

      .o-anchor-item-link {
        border-radius: 4px;
        height: 48px;
        padding: 0 16px;
        line-height: 48px;
      }

      .o-anchor-item {
        .o-anchor-item-link {
          padding-left: 24px;
        }

        .o-anchor-item {
          .o-anchor-item-link {
            padding-left: 32px;
          }
        }
      }
    }
  }
}

:deep(.mobile-score) {

  .slider-item {
    margin-bottom: var(--o-gap-4);
    display: flex;
    align-items: center;
    @include respond-to('phone') {
      flex-direction: column;
      margin-bottom: var(--o-gap-3);
    }

    .slider-item-title {
      width: 72px;
      margin-right: 24px;
      flex-shrink: 0;
      font-size: 12px;
      line-height: 18px;
      @include respond-to('phone') {
        margin-bottom: 20px;
        margin-right: 0;
      }
    }

    .el-slider {
      margin-top: 0;

      .el-slider__marks {
        display: block;

        .el-slider__marks-text {
          margin-top: 0;
          bottom: 100%;
          font-size: 16px;
          color: var(--o-color-info4);
          transform: scale(0.5) translateX(-50%);
          transform-origin: left center;

        }
      }
    }
  }

  .slider-btn2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 8px;

    .o-btn {
      --btn-height: 40px;
      flex-grow: 1;
      color: var(--o-color-info1);

      &.o-btn-disabled {
        color: var(--o-color-info4);
      }
    }

    .o-divider {
      --o-divider-label-gap: 0 8px;
      font-size: 20px;
    }
  }

}
</style>